<template>
<div class="main">
    <el-dialog
  title="添加图书"
  :visible.sync="formDisplay"
  width="50%">
  <div>
    <el-form :model="upform" :rules="rules" ref="ruleForm" label-width="80px">
  <el-form-item label="图书名字" prop="bookName">
    <el-input v-model="upform.bookName"></el-input>
  </el-form-item>
  <el-form-item label="图书作者" prop="author">
    <el-input v-model="upform.author"></el-input>
  </el-form-item>
  <el-form-item label="图书描述" prop="desc">
    <el-input type="text" v-model="upform.desc"></el-input>
  </el-form-item>
    </el-form>
  </div>
  <div>
    <!-- 图书封面 -->
<el-upload
  ref="upBookPic"
  class="upload-demo"
  :action="evUrl+'zj/addBookInfo'"
  :data="upform"
  :auto-upload="false"
  :on-success="picSuccess"
  :on-remove="removeFileList"
  :on-change="getFileList"
  :file-list="fileList"
  limit:1
  list-type="picture">
  <el-button v-if="fFlag" size="small" type="primary">上传封面</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<!-- 图书pdf文件 -->
<el-upload
        ref="upBookPdf"
        :action="evUrl+'zj/addBookPdf'"
        accept=".pdf"
        :data="upPdfInfo"
        :on-success="pdfSuccess"
        :on-change="getPdfFileList"
        :on-remove="removePdfList"
        :auto-upload="false"
        :file-list="pdfFileList">
           <el-button v-if="pFlag" size="mini">
            选择pdf文件
           </el-button>
           <div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
        </el-upload>
  </div>
  <el-button type="primary" size="mini" @click="makeUp">提交</el-button>
  </el-dialog>
    <div class="header" style="display:flex;justify-content:space-between">
    <div class="header-l">
      <el-button style="background:skyblue;color:#fff;border:1px solid purple" @click="btnOne" size="mini">添加</el-button>
    </div>
    <div class="header-r">
      <el-input size="mini" placeholder="请输入图书名称关键字搜索" style="width:218px;margin-right:8px" v-model="searchVal"></el-input>
      <el-button style="background:skyblue;color:#fff;border:1px solid purple" @click="serachOpt" size="mini">搜索</el-button>
    </div>
  </div>
  <div class="body">
    <el-table
    :data="tableData"
    style="width: 100%"
    height="498">
    <el-table-column
      fixed
      prop="bookTime"
      label="添加时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="bookName"
      label="图书名字"
      width="120">
    </el-table-column>
    <el-table-column
      prop="bookAuthor"
      label="图书作者"
      width="120">
    </el-table-column>
    <el-table-column
      prop="bookDesc"
      label="图书描述"
      width="120">
    </el-table-column>
    <el-table-column
      label="图书封面"
      width="300">
      <template slot-scope="scope">
        <div style="width:88px;height:128px"><el-image :src="evUrl+scope.row.bookPic"></el-image></div>
      </template>
    </el-table-column>
    <el-table-column
      label="操作">
      <template slot-scope="scope">
        <el-button @click="deleteBook(scope.row)" type="text">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <div class="footer" style="position:fixed;right:0;bottom:0">
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</div>
</template>
<script>
import { getBookInfo, deleteXs } from '../api/info'
export default {
  data () {
    return {
      searchVal: '',
      fFlag: true,
      pFlag: true,
      currentPage: 1,
      pageCount: 1,
      fileList: [],
      pdfFileList: [],
      formDisplay: false,
      pdfDisplay: false,
      upform: {
        bookName: '',
        author: '',
        desc: ''
      },
      upPdfInfo: {
        id: ''
      },
      rules: {
        bookName: [
          { required: true, message: '请输入图书名称', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入图书作者', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入图书描述', trigger: 'blur' }
        ]
      },
      total: 0,
      evUrl: this.$evUrl,
      tableData: []
    }
  },
  methods: {
    // 删除图书
    deleteBook (row) {
      deleteXs(row).then(({ data }) => {
        if (data.status === 200) {
          this.$message.success('删除成功')
          this.getBook()
        }
      })
    },
    // 搜索
    serachOpt () {
      this.currentPage = 1
      this.getBook()
    },
    // 打开添加图书
    btnOne () {
      this.pdfShow = true
      this.formDisplay = true
    },
    // 获取图片列表
    getFileList (file, fileList) {
      this.fileList = fileList
      if (fileList.length === 1) {
        this.fFlag = false
      }
    },
    // 获取文件列表
    getPdfFileList (file, fileList) {
      this.pdfFileList = fileList
      if (fileList.length === 1) {
        this.pFlag = false
      }
    },
    // 移除图片列表
    removeFileList (file, fileList) {
      this.fileList = fileList
      if (fileList.length === 0) {
        this.fFlag = true
      }
    },
    // 移除pdf文件
    removePdfList (file, fileList) {
      this.pdfFileList = fileList
      if (fileList.length === 0) {
        this.pFlag = true
      }
    },
    // 上传文件
    makeUp () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!((this.pdfFileList.length === 1) && (this.fileList.length === 1))) {
            return this.$message.info('请选择文件')
          } else {
            this.$refs.upBookPic.submit()
          }
        } else {
          return this.$message.info('请填写正确表单')
        }
      })
    },
    // 图片上传成功
    picSuccess (response) {
      this.upPdfInfo.id = response.id
      // pdf文件上传
      this.$refs.upBookPdf.submit()
      this.getBook()
    },
    // pdf文件上传成功
    pdfSuccess (response) {
      if (response.status === 200) {
        this.$refs.upBookPdf.clearFiles()
        this.$refs.upBookPic.clearFiles()
        this.$refs.ruleForm.resetFields()
        this.fFlag = true
        this.pFlag = true
        this.formDisplay = false
        return this.getBookInfo()
      }
    },
    // 下一页
    handleCurrentChange (val) {
      this.currentPage = val
      this.getBook()
    },
    // 获取图书
    getBook () {
      getBookInfo({ serchVal: this.searchVal, currentPage: this.currentPage }).then(({ data }) => {
        this.total = data.total
        this.tableData = data.arrVal
      })
    }
  },
  mounted () {
    this.getBook()
  }
}
</script>

<style scoped lang="less">
.main{
  .header{
    height: 32px;
    // background: red;
    /deep/ .el-input__inner{
      background:transparent;
      border:1px solid blue;
    }
  }
}
</style>
